<template>
  <div class="detail" ref="detailRef">
    <van-sticky ref="stickyRef">
      <header-component
          :title="title"
          :showPre="true"
          :showSearchIcon="true"
          :titleSlide="titleSlide"
      >
        <template #operate>
          <category-filter @handleOrderConfirm="handleOrder" @handleCategoryConfirm="handleCategory" @handleChangeCard="handleChangeCard"></category-filter>
        </template>
      </header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
      <section v-if="true">
        <CompactCard v-if="changeCard == 0" :show-bottom="true" :show-tags="true"
                     :content="data.articleList"></CompactCard>
        <detailCard v-if="changeCard == 1"></detailCard>
      </section>
      <van-empty
          v-else
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="空列表"
      />
    </van-pull-refresh>

  </div>
</template>

<script setup>
import HeaderComponent from "@/components/header/index.vue";
import CompactCard from "@/components/card/compactCard.vue";
import DetailCard from '@/components/card/detailCard.vue'
import CategoryFilter from "@/components/filter/categoryFilter.vue";
import {onMounted, reactive, ref, toRaw, watch} from "vue";
import {useRouter} from "vue-router";
import {useScrollWatch, useScrollWatch2} from "@/hooks/userScrollWatch.js";
import {listArticle} from "@/api/app/app.js";
import {showToast} from "vant";
import useArticleFilterStore from "@/stores/modules/articleFilter.js";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";

const router = useRouter();
onMounted(() => {
  initQueryParams()
  // 打印
  // console.log('router:', router.currentRoute.value.query)
  if (undefined != router.currentRoute.value.query.name && null != router.currentRoute.value.query.name && '' != router.currentRoute.value.query.name){
    useArticleFilterStore().setQueryParamsName(router.currentRoute.value.query.name)
  }
  if (undefined != router.currentRoute.value.query.type && null != router.currentRoute.value.query.type && '' != router.currentRoute.value.query.type){
    useArticleFilterStore().setQueryParamsType(router.currentRoute.value.query.type)
  }
  // console.log(router.currentRoute.value.params)
  // 通过router.currentRoute.value里的参数获取
  title.value = router.currentRoute.value.query.name;
  getArticleList()
})

const title = ref("");
const data = reactive({
  articleList: [],
})


/** 初始化查询 */
const initQueryParams = ()=>{
  useArticleFilterStore().queryParams = {
    name: undefined,
    type: undefined,
    orderField: undefined,
    orderType:undefined,
    collectTypeIds:undefined
  }
}

const stickyRef = ref();
const changeCard = ref(0);

const handleChangeCard = (val) => {
  // 0紧凑卡片  1详情卡片
  changeCard.value = val;
}

/** 排序 */
const handleOrder = () =>{
  // console.log(toRaw(useArticleFilterStore().queryParams))
  // 重新获取文章列表
  getArticleList();
  // 关闭弹窗
  useOperatorBoxStore().setIsShowOverlay(false);
}

/** 筛选 */
const handleCategory = () =>{
  console.log(toRaw(useArticleFilterStore().queryParams))
  // 重新获取文章列表
  getArticleList();
  // 关闭弹窗
  useOperatorBoxStore().setIsShowOverlay(false)
}

/** 获取文章列表 */
const getArticleList = () => {
  listArticle(toRaw(useArticleFilterStore().queryParams)).then(response => {
    // console.log(response.data.length)
    if (response.data !=null && response.data.length != 0){
      response.data.forEach(e => {
        e.images = e.images.split(",")[0]
      })
      data.articleList = response.data
    }else {
      data.articleList = null
      showToast("暂无内容")
    }
    loading.value = false;
  });
}

/** 下拉刷新 */
const loading = ref(false);
const onRefresh = () => {
  getArticleList()
};

/** 标题动画相关的操作 */
const detailRef = ref();
let titleSlide = useScrollWatch(detailRef)
useScrollWatch2(titleSlide, stickyRef)

</script>

<style lang="less" scoped>
.detail {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
  :deep(.van-pull-refresh) {
    position: relative;
    top: 50px;
    padding: 0 12px;

    section {
      padding-bottom: 126px;
      padding-top: 14px;
    }
  }
}

.detail::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
</style>
